<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MSSQL数据库管理器</title>
    <!-- Local Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Local Bootstrap Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --secondary-color: #f1f5f9;
            --accent-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --border-radius: 12px;
            --border-radius-sm: 8px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--text-primary);
            line-height: 1.6;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--primary-color) !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar-brand i {
            font-size: 1.8rem;
        }

        .connection-form {
            max-width: 480px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
            border: none;
            padding: 1.25rem 1.5rem;
            font-weight: 600;
        }

        .card-header h5, .card-header h6 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .card-body {
            padding: 2rem 1.5rem;
        }

        .form-label {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .form-control {
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            background: rgba(255, 255, 255, 0.8);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background: white;
        }

        .btn {
            border-radius: var(--border-radius-sm);
            font-weight: 500;
            padding: 0.75rem 1.5rem;
            transition: all 0.2s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            box-shadow: var(--shadow-sm);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            background: linear-gradient(135deg, var(--primary-dark), #3730a3);
        }

        .btn-outline-light {
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .table-container {
            display: none;
            padding: 1rem;
        }

        .table-list {
            max-height: 500px;
            overflow-y: auto;
            border-radius: var(--border-radius-sm);
        }

        .table-list::-webkit-scrollbar {
            width: 6px;
        }

        .table-list::-webkit-scrollbar-track {
            background: var(--secondary-color);
            border-radius: 3px;
        }

        .table-list::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
        }

        .list-group-item {
            border: none;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.25rem;
            transition: all 0.2s ease;
            background: rgba(255, 255, 255, 0.8);
        }

        .list-group-item:hover {
            background: rgba(99, 102, 241, 0.05);
            transform: translateX(4px);
        }

        .list-group-item.active {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            transform: translateX(8px);
        }

        .list-group-item h6 {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .data-table {
            font-size: 0.9em;
        }

        .table {
            border-radius: var(--border-radius-sm);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .table thead th {
            background: linear-gradient(135deg, var(--text-primary), #374151);
            color: white;
            font-weight: 600;
            border: none;
            padding: 1rem 0.75rem;
        }

        .table tbody tr {
            transition: all 0.2s ease;
        }

        .table tbody tr:hover {
            background: rgba(99, 102, 241, 0.05);
        }

        .loading {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-secondary);
        }

        .spinner-border {
            color: var(--primary-color);
        }

        .query-container {
            margin-top: 1.5rem;
        }

        .query-textarea {
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
            background: rgba(15, 23, 42, 0.05);
            border: 2px solid var(--border-color);
        }

        .query-textarea:focus {
            background: white;
        }

        .nav-tabs {
            border: none;
            margin-bottom: 1rem;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 0.75rem 1.25rem;
            margin-right: 0.25rem;
            transition: all 0.2s ease;
        }

        .nav-tabs .nav-link:hover {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary-color);
        }

        .nav-tabs .nav-link.active {
            background: var(--primary-color);
            color: white;
        }

        .badge {
            font-weight: 500;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
        }

        .alert {
            border: none;
            border-radius: var(--border-radius-sm);
            font-weight: 500;
        }

        .btn-group-sm .btn {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
            border-radius: var(--border-radius-sm);
        }

        .pagination-info {
            background: rgba(99, 102, 241, 0.1);
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius-sm);
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .container {
                padding: 0.5rem;
            }

            .connection-form {
                margin: 1rem auto;
                padding: 0 0.5rem;
            }

            .card-body {
                padding: 1.5rem 1rem;
            }

            .table-container {
                padding: 0.5rem;
            }

            .btn-group {
                flex-direction: column;
                width: 100%;
            }

            .btn-group .btn {
                margin-bottom: 0.5rem;
                border-radius: var(--border-radius-sm) !important;
            }

            .nav-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
            }

            .nav-tabs .nav-link {
                white-space: nowrap;
                margin-right: 0.5rem;
            }

            .table-responsive {
                border-radius: var(--border-radius-sm);
            }

            .navbar-brand {
                font-size: 1.25rem;
            }

            .card-header {
                padding: 1rem;
            }

            .list-group-item {
                padding: 0.75rem 1rem;
            }
        }

        @media (max-width: 576px) {
            .col-md-4, .col-md-8 {
                margin-bottom: 1rem;
            }

            .btn-group-sm .btn {
                font-size: 0.8rem;
                padding: 0.3rem 0.6rem;
            }

            .pagination-info {
                font-size: 0.8rem;
                text-align: center;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        .slide-in {
            animation: slideIn 0.3s ease-out;
        }

        /* 深色模式支持 */
        @media (prefers-color-scheme: dark) {
            :root {
                --text-primary: #f1f5f9;
                --text-secondary: #94a3b8;
                --border-color: #334155;
                --secondary-color: #1e293b;
            }
        }

        /* 添加标签页切换动画 */
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .tab-pane {
            animation: fadeInUp 0.3s ease;
        }

        /* 表格行动画 */
        .table tbody tr {
            transition: all 0.2s ease;
        }

        .table tbody tr:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-database-gear"></i>
                MSSQL数据库管理器
            </a>
            <div class="navbar-nav ms-auto">
                <button class="btn btn-outline-light btn-sm" id="disconnectBtn" style="display: none;">
                    <i class="bi bi-power"></i>
                    断开连接
                </button>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 数据库连接表单 -->
        <div class="connection-form fade-in">
            <div class="card">
                <div class="card-header">
                    <h5>
                        <i class="bi bi-server"></i>
                        数据库连接配置
                    </h5>
                </div>
                <div class="card-body">
                    <form id="connectionForm">
                        <div class="mb-3">
                            <label for="server" class="form-label">
                                <i class="bi bi-hdd-network me-2"></i>
                                服务器地址
                            </label>
                            <input type="text" class="form-control" id="server" placeholder="例如: 192.168.1.100" required>
                        </div>
                        <div class="mb-3">
                            <label for="port" class="form-label">
                                <i class="bi bi-ethernet me-2"></i>
                                端口
                            </label>
                            <input type="number" class="form-control" id="port" value="1433" required>
                        </div>
                        <div class="mb-3">
                            <label for="database" class="form-label">
                                <i class="bi bi-database me-2"></i>
                                数据库名称
                            </label>
                            <input type="text" class="form-control" id="database" placeholder="数据库名称" required>
                        </div>
                        <div class="mb-3">
                            <label for="user" class="form-label">
                                <i class="bi bi-person me-2"></i>
                                用户名
                            </label>
                            <input type="text" class="form-control" id="user" placeholder="数据库用户名" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">
                                <i class="bi bi-key me-2"></i>
                                密码
                            </label>
                            <input type="password" class="form-control" id="password" placeholder="数据库密码" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-plug"></i>
                            连接数据库
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- 数据库管理界面 -->
        <div class="table-container slide-in" id="tableContainer">
            <div class="row">
                <!-- 左侧：表列表 -->
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6>
                                <i class="bi bi-list-ul"></i>
                                数据表列表
                            </h6>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" id="refreshTablesBtn">
                                    <i class="bi bi-arrow-clockwise"></i>
                                </button>
                                <button class="btn btn-outline-success" id="exportAllBtn">
                                    <i class="bi bi-download"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-list" id="tableList">
                                <div class="loading">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <p class="mt-2">正在加载表列表...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：表详情 -->
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs" id="tableTabs">
                                <li class="nav-item">
                                    <a class="nav-link active" id="structure-tab" data-bs-toggle="tab" href="#structure">
                                        <i class="bi bi-diagram-3"></i>
                                        表结构
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="data-tab" data-bs-toggle="tab" href="#data">
                                        <i class="bi bi-table"></i>
                                        数据浏览
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="query-tab" data-bs-toggle="tab" href="#query">
                                        <i class="bi bi-code-slash"></i>
                                        SQL查询
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <!-- 表结构标签页 -->
                                <div class="tab-pane fade show active" id="structure">
                                    <div id="tableStructure">
                                        <div class="table-responsive">
                                            <table class="table table-hover" id="structureTable">
                                                <thead class="table-dark">
                                                    <tr>
                                                        <th><i class="bi bi-tag me-1"></i>列名</th>
                                                        <th><i class="bi bi-gear me-1"></i>数据类型</th>
                                                        <th><i class="bi bi-question-circle me-1"></i>允许空值</th>
                                                        <th><i class="bi bi-rulers me-1"></i>长度/精度</th>
                                                        <th><i class="bi bi-code-slash me-1"></i>默认值</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td colspan="5" class="text-center text-muted py-4">
                                                            <i class="bi bi-table display-4 mb-3 d-block"></i>
                                                            请从左侧选择一个表来查看其结构
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- 数据浏览标签页 -->
                                <div class="tab-pane fade" id="data">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div class="pagination-info" id="paginationInfo">
                                            <i class="bi bi-info-circle me-1"></i>
                                            暂无数据
                                        </div>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary" id="prevPageBtn" disabled>
                                                <i class="bi bi-chevron-left"></i>
                                                上一页
                                            </button>
                                            <button class="btn btn-outline-primary" id="nextPageBtn" disabled>
                                                下一页
                                                <i class="bi bi-chevron-right"></i>
                                            </button>
                                            <button class="btn btn-outline-success" id="exportTableBtn" disabled>
                                                <i class="bi bi-file-earmark-excel"></i>
                                                导出
                                            </button>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <div id="tableData">
                                            <div class="text-center text-muted py-5">
                                                <i class="bi bi-database display-4 mb-3"></i>
                                                <p>请从左侧选择一个表来查看其数据</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- SQL查询标签页 -->
                                <div class="tab-pane fade" id="query">
                                    <div class="query-container">
                                        <div class="mb-3">
                                            <label for="sqlQuery" class="form-label">
                                                <i class="bi bi-terminal me-2"></i>
                                                SQL查询语句
                                            </label>
                                            <textarea class="form-control query-textarea" id="sqlQuery" rows="6" 
                                                placeholder="输入您的SQL查询语句...&#10;例如: SELECT * FROM TableName WHERE condition"></textarea>
                                        </div>
                                        <div class="d-flex gap-2 mb-3">
                                            <button class="btn btn-primary" id="executeQueryBtn">
                                                <i class="bi bi-play-fill"></i>
                                                执行查询
                                            </button>
                                            <button class="btn btn-outline-secondary" id="clearQueryBtn">
                                                <i class="bi bi-x-circle"></i>
                                                清空
                                            </button>
                                            <button class="btn btn-outline-success" id="exportQueryBtn" disabled>
                                                <i class="bi bi-download"></i>
                                                导出结果
                                            </button>
                                        </div>
                                        <div class="table-responsive">
                                            <div id="queryResults">
                                                <div class="text-center text-muted py-5">
                                                    <i class="bi bi-search display-4 mb-3"></i>
                                                    <p>执行SQL查询后，结果将显示在这里</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>